irongit
Sign inRegister
huncholanehuncholane/dotbarPublic

Waybar configuration

dotbar/style/[Extra] Neon Circuit.css
422 lines8.6 KBCSS
RawDownloadHistory
1/* ----------- 💫 https://github.com/JaKooLit 💫 -------- */
2/* --- Extra - Neon Circuit - waybar style ---*/
3
4@define-color bar-bg rgba(0, 0, 0, 0);
5@define-color main-bg #313244;
6@define-color main-fg #b4befe;
7@define-color wb-act-bg #b4befe;
8@define-color wb-act-fg #1e1e2e;
9@define-color wb-hvr-bg #f5c2e7;
10@define-color wb-hvr-fg #313244;
11
12* {
13 border: none;
14 border-radius: 0px;
15 font-family: "JetBrainsMono Nerd Font";
16 font-weight: bold;
17 min-height: 0;
18 /* set font-size to 100% if font scaling is set to 1.00 using nwg-look */
19 font-size: 97%;
20 font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"';
21}
22
23window#waybar {
24 background: @bar-bg;
25}
26
27tooltip {
28 background: @main-bg;
29 color: @main-fg;
30 border-radius: 12px;
31 border-width: 0px;
32}
33
34#taskbar button,
35#workspaces button {
36 box-shadow: none;
37 text-shadow: none;
38 padding: 2px;
39 border: 2px;
40 border-color: #b4befe;
41 border-width: 5px;
42 border-radius: 10px;
43 margin-top: 2px;
44 margin-bottom: 2px;
45 margin-left: 0px;
46 padding-left: 6px;
47 padding-right: 0px;
48 margin-right: 0px;
49 color: @wb-act-fg;
50 background-color: #b4befe;
51 animation: ws_normal 2s ease-in-out 1;
52}
53
54#taskbar button.active,
55#workspaces button.active {
56 background-image: linear-gradient(45deg, #89b4fa 50%, #cba6f7 50%);
57 color: @wb-act-fg;
58 border-radius: 12px;
59 margin-left: 4px;
60 padding-left: 12px;
61 padding-right: 12px;
62 margin-right: 4px;
63 animation: ws_active 2s ease-in-out 1;
64 transition: all 0.4s cubic-bezier(.55,-0.68,.48,1.682);
65}
66
67#taskbar button:hover,
68#workspaces button:hover {
69 background: @wb-hvr-bg;
70 color: @wb-hvr-fg;
71 animation: ws_hover 20s ease-in-out 1;
72 transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
73}
74
75#tray menu * {
76 min-height: 18px
77}
78
79#tray menu separator {
80 min-height: 16px
81}
82
83#backlight,
84#backlight-slider,
85#battery,
86#bluetooth,
87#clock,
88#cpu,
89#disk,
90#idle_inhibitor,
91#keyboard-state,
92#memory,
93#mode,
94#network,
95#power-profiles-daemon,
96#pulseaudio,
97#pulseaudio-slider,
98#taskbar button,
99#taskbar,
100#temperature,
101#tray,
102#window,
103#wireplumber,
104#workspaces,
105#custom-backlight,
106#custom-browser,
107#custom-cava_mviz,
108#custom-cycle_wall,
109#custom-dot_update,
110#custom-file_manager,
111#custom-keybinds,
112#custom-keyboard,
113#custom-light_dark,
114#custom-lock,
115#custom-hint,
116#custom-hypridle,
117#custom-menu,
118#custom-playerctl,
119#custom-power_vertical,
120#custom-power,
121#custom-quit,
122#custom-reboot,
123#custom-settings,
124#custom-spotify,
125#custom-swaync,
126#custom-tty,
127#custom-updater,
128#custom-weather,
129#custom-weather.clearNight,
130#custom-weather.cloudyFoggyDay,
131#custom-weather.cloudyFoggyNight,
132#custom-weather.default,
133#custom-weather.rainyDay,
134#custom-weather.rainyNight,
135#custom-weather.severe,
136#custom-weather.showyIcyDay,
137#custom-weather.snowyIcyNight,
138#custom-weather.sunnyDay {
139 color: @main-fg;
140 background: @main-bg;
141 opacity: 1;
142 margin: 3px 0px 3px 0px;
143 padding-left: 4px;
144 padding-right: 4px;
145}
146
147#workspaces {
148 border-radius: 20px;
149 border-width: 2px;
150 border-style: solid;
151 border-color: #b4befe;
152 padding-right: 8px;
153 padding-left: 8px;
154 margin-right: 5px;
155}
156
157#taskbar {
158 padding: 0px;
159 color: #b4befe;
160}
161
162#window {
163 color: #F2CCCC;
164 border-radius: 20px;
165 border-style: solid;
166 border-width: 2px;
167 border-color: #F2CCCC;
168 margin-right: 5px;
169}
170
171#clock {
172 color: #F38BA8;
173 border-radius: 12px;
174 border-top-left-radius: 0px;
175 border-bottom-right-radius: 0px;
176 border-width: 2px;
177 border-style: solid;
178 border-left-style: none;
179 border-right-style: none;
180 border-left-width: 0px;
181 border-width: 2px;
182 border-color: #F38BA8;
183 margin-right: 5px;
184}
185
186#idle_inhibitor {
187 color: #94e2d5;
188 border-radius: 12px;
189 border-top-right-radius: 0px;
190 border-bottom-left-radius: 0px;
191 border-style: solid;
192 border-right-style: none;
193 border-width: 2px;
194 border-color: #F38BA8;
195 margin-right: 0px;
196}
197
198#idle_inhibitor.activated {
199 color: #39FF14;
200}
201
202#temperature {
203 color: #cdd6f4;
204 border-radius: 20px;
205 border-top-right-radius: 0px;
206 border-bottom-right-radius: 0px;
207 border-style: solid;
208 border-right-style: none;
209 border-width: 2px;
210 border-color: #cdd6f4;
211 margin-left: 5px;
212}
213
214#temperature.critical {
215 background-color: #ff0000;
216}
217
218@keyframes blink {
219 to {
220 color: #000000;
221 }
222}
223
224#cpu,
225#disk,
226#memory {
227 color: #cdd6f4;
228 border-radius: 0px;
229 border-style: solid;
230 border-left-style: none;
231 border-right-style: none;
232 border-width: 2px;
233 border-color: #cdd6f4;
234 margin-right: 0px;
235}
236
237#custom-menu {
238 color: #ff5a5a;
239 border-radius: 6px;
240 border-top-right-radius: 0px;
241 border-bottom-left-radius: 0px;
242 border-style: solid;
243 border-left-style: none;
244 border-right-style: none;
245 border-width: 2px;
246 border-color: #cdd6f4;
247 padding-right: 5px;
248 padding-left: 5px;
249}
250
251#network {
252 border-radius: 12px;
253 border-top-left-radius: 0px;
254 border-bottom-left-radius: 0px;
255 border-style: solid;
256 border-left-style: none;
257 border-left-width: 0px;
258 border-width: 2px;
259 border-color: #cdd6f4;
260 margin-right: 5px;
261}
262
263#backlight {
264 color: #F5E0DC;
265 border-radius: 12px;
266 border-top-right-radius: 0px;
267 border-bottom-right-radius: 0px;
268 border-style: solid;
269 border-right-style: none;
270 border-width: 2px;
271 border-color: #F5E0DC;
272 margin-left: 5px;
273}
274
275#pulseaudio {
276 color: #F5E0DC;
277 border-radius: 20px;
278 border-top-left-radius: 0px;
279 border-bottom-left-radius: 0px;
280 border-style: solid;
281 border-left-style: none;
282 border-width: 2px;
283 border-color: #F5E0DC;
284 margin-right: 0px;
285}
286
287#pulseaudio.muted {
288 color: red;
289}
290
291#keyboard-state {
292 color: #F5E0DC;
293 border-radius: 20px;
294 border-top-left-radius: 0px;
295 border-bottom-left-radius: 0px;
296 border-style: solid;
297 border-left-style: none;
298 border-left-width: 0px;
299 border-width: 2px;
300 border-color: #F5E0DC;
301 margin-right: 5px;
302}
303
304#custom-updater {
305 color: #F5E0DC;
306 border-radius: 0px;
307 border-style: solid;
308 border-left-style: none;
309 border-right-style: none;
310 border-width: 2px;
311 border-color: #F5E0DC;
312 margin-right: 0px;
313}
314
315#custom-hint {
316 color: #F5E0DC;
317 border-radius: 12px;
318 border-top-left-radius: 0px;
319 border-bottom-right-radius: 0px;
320 border-style: solid;
321 border-left-style: none;
322 border-right-style: none;
323 border-left-width: 0px;
324 border-width: 2px;
325 border-color: #F5E0DC;
326 margin-right: 5px;
327}
328
329#tray {
330 color: #b4befe;
331 font-size: 16;
332 border-radius: 12px;
333 border-top-right-radius: 0px;
334 border-bottom-left-radius: 0px;
335 border-width: 2px;
336 border-style: solid;
337 border-left-style: none;
338 border-right-style: none;
339 border-width: 2px;
340 border-color: #b4befe;
341 margin-left: 5px;
342 padding-left: 8px;
343}
344
345#tray > .active,
346#tray > .passive,
347#tray menu {
348 color: #b4befe;
349}
350
351#custom-swaync {
352 border-radius: 12px;
353 border-top-left-radius: 0px;
354 border-bottom-right-radius: 0px;
355 border-style: solid;
356 border-left-style: none;
357 border-right-style: none;
358 border-width: 2px;
359 border-color: #b4befe;
360 margin-right: 0px;
361}
362
363#battery {
364 border-radius: 20px;
365 border-top-left-radius: 0px;
366 border-bottom-left-radius: 0px;
367 border-style: solid;
368 border-left-style: none;
369 border-left-width: 0px;
370 border-width: 2px;
371 border-color: #b4befe;
372 margin-right: 5px;
373 padding-right: 8px;
374}
375
376#custom-power {
377 border-radius: 12px;
378 border-top-left-radius: 0px;
379 border-bottom-right-radius: 0px;
380 border-style: solid;
381 border-left-style: none;
382 border-width: 2px;
383 border-color: #F38BA8;
384 padding-left: 0px;
385 padding-right: 5px;
386 margin-right: 5px;
387}
388
389#custom-weather,
390#custom-weather.clearNight,
391#custom-weather.cloudyFoggyDay,
392#custom-weather.cloudyFoggyNight,
393#custom-weather.default,
394#custom-weather.rainyDay,
395#custom-weather.rainyNight,
396#custom-weather.severe,
397#custom-weather.showyIcyDay,
398#custom-weather.snowyIcyNight,
399#custom-weather.sunnyDay {
400 border-radius: 12px;
401 border-top-left-radius: 0px;
402 border-bottom-right-radius: 0px;
403 border-width: 2px;
404 border-style: solid;
405 border-left-style: none;
406 border-right-style: none;
407 border-color: #E06C75;
408 color: #E06C75;
409 margin-right: 5px;
410}
411
412#window {
413 background-image: linear-gradient(45deg, #89b4fa 50%, #cba6f7 50%);
414 color: black;
415 border-radius: 20px;
416 border-width: 2px;
417 border-style: solid;
418 border-left-style: none;
419 border-right-style: none;
420 border-color: #f5e0dc;
421 margin-right: 5px;
422}